<template>
  <div v-bind:class="helloClass">
    <img width="15%" src="../../../static/img/logo.png">
    <h2 v-bind:style="titleObj">{{title}}</h2>
    <el-form class="demo-ruleForm">
      <el-form-item>
        <el-input type="text" v-model="username" v-bind:class="btnWidthClass" auto-complete="off" @change="usernameChange" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="password" v-bind:class="btnWidthClass" auto-complete="off" @change="passwordChange" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="text" v-bind:style="[forgetpasswordObj,titleObj]" @click="toForgetPassword">{{forgetpasswordmsg}}</el-button><span v-bind:style="titleObj"> |</span>
        <el-button type="text" v-bind:style="[forgetpasswordObj,titleObj]" @click="toRegister">{{registermsg}}</el-button>
       </el-form-item>
      <el-form-item>
        <el-button type="primary" v-bind:style="loginObj" @click="login">{{loginmsg}}</el-button>
      </el-form-item>
      <el
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'hello',
  data () {
    return {
      title:'登入人才管理系统',
      username:'',
      password:'',
      forgetpasswordmsg:'忘记密码',
      registermsg:'注册账号',
      loginmsg:'登录',
      helloClass:'hello',
      btnWidthClass:'btnWidth',
      loginObj:{
        marginBottom:'20px',
        width:'300px'
      },
      forgetpasswordObj:{
        marginBottom:'-20px',
        marginTop:'-20px',
      },
      titleObj:{
        color:'white',
        fontFamily: "Helvetica Neue"
      }
    }
  },
  methods: {
  	login(){
  		if(this.$store.state.username === 'root' && this.$store.state.password === 'hlh'){
        //login success
        this.$message({
          message: '登录成功!',
          type: 'success'
        });
  			this.$router.push({path: '/index'});
  		}
  	},
    usernameChange(){
      this.$store.state.username = this.username;
    },
    passwordChange(){
      this.$store.state.password = this.password;
    },
    toRegister(){
      this.$router.push({path: '/register'});
    },
    toForgetPassword(){
      
    }
  },
  created(){
    // const height = this.$store.state.clientHeight;
    // document.getElementById("login").height=height + "px";
    // $(".helloClass").css(height + 'px');
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  margin:0px auto;
  padding-top:180px;
  width: 23%;
  background-color: #00B289;
  width: 100%;
}

.btnWidth{
  width: 300px;
}
</style>
